<template>
  <div class="roleApply">
    <div class="role">
      当前角色：<span>
         <span v-for="item in userRole" :key="item">{{ item }}&nbsp;</span>
        
      </span>
     
    </div>
      <h2>角色申请</h2>
    <form>
      <p>
        角色选择：
        <el-select v-model="roleValue" @change="changeRole" clearable placeholder="请选择角色">
           <el-option
            v-for="item in allRole"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </p>
      <br />
      <p>角色功能：
        <ul class="role-functions">
          <li v-for="item in roleFunctions" :key="item">
            {{item}}
          </li>
        </ul>
      </p>
      <br>
      <p>
        申请理由：
        <textarea v-model="applyReason" cols="50" rows="8" placeholder="请输入角色申请理由..." @keyup="textareaLength" id="reason"></textarea>
        
      </p>
      <br>
       <div class="promt" v-if="promt">角色申请理由字数不得超过100字！</div>
     
<br>
    </form>
    <p class="submit-btu"> <el-button type="primary" plain @click ="submitApplication" id="submit" :disabled='submit'>提交申请</el-button></p>
  </div>
</template>

<script>
export default {
  name: "RoleApply",
  data() {
    return {
      allRole: [], //所有角色名称
      roleValue: "", //选中角色名称
      userRole: "", //用户角色名称
      roleFunctions: [], // 选中角色功能
      roleAndPermissions: {}, //所有角色以及功能
      promt: false, //promt提示是否显示
      applyReason: "", //申请理由
      submit: false,
    };
  },
  methods: {
    //输入文字提示
    textareaLength() {
      let reason = document.querySelector("#reason").value.trim().length;
      if (reason > 100) {
        this.promt = true;
      } else {
        this.promt = false;
      }
    },
    //初始化页面
    pageLoad() {
      this.$http({
        method: "post",
        url: "role/showRoles",
      }).then(({ data }) => {
        if (data) {
          console.log(data);
          console.log("页面初始化数据请求成功！");
          //处理角色名称
          this.allRole = Object.keys(data.data.roleAndPermissions);
          //存储角色以及功能
          this.roleAndPermissions = data.data.roleAndPermissions;
          //用户身份复制
          if (data.data.roleByUid) {
            this.userRole = data.data.roleByUid;
          } else {
            this.userRole = "用户";
          }
        } else {
          console.log(data.errorMsg);
        }
      });
    },
    //角色改变
    changeRole() {
      for (let index = 0; index < this.allRole.length; index++) {
        this.roleFunctions = this.roleAndPermissions[this.roleValue];
      }
    },
    //申请角色
    apply() {
      if (this.roleValue.trim() && this.applyReason.trim()) {
        this.$http({
          method: "post",
          url: "role/applyRole",
          params: {
            rolename: this.roleValue, //申请角色
            applymsg: this.applyReason, //申请理由
            uid: this.$store.getters.getLoginxMessage.uid,
          },
        }).then(({ data }) => {
          if (data) {
            this.$message.success(data.data);
            //按钮禁用避免重复请求
            this.submit = true;
          } else {
            this.$message.warning(`申请失败！`);
          }
        });
      } else {
        this.$message.warning(`请完整填写申请数据！`);
      }
    },
    //提交申请
    submitApplication() {
      if (this.roleValue && this.applyReason) {
        this.apply();
      } else {
        this.$message.warning("请完整填在申请！");
      }
    },
  },
  mounted() {
    this.pageLoad();
  },
};
</script>

<style lang="less" scoped>
.roleApply {
  width: 100%;
  // height: 500px;
  background-color: #fff;
  box-shadow: 0 0 10px 0px #dbdada;
  position: relative;
  color: #6d6d6d;
  padding-bottom: 50px;
}
.role {
  position: absolute;
  top: 20px;
  right: 20px;

  span {
    font-weight: 700;
    // color: #3f3f3f;
    color: orangered;
  }
}
h2 {
  color: #3f3f3f;
  text-align: center;
  padding-top: 50px;
  letter-spacing: 5px;
}
form {
  padding-left: 300px;
  padding-top: 30px;
  p {
    font-size: 16px;
    font-weight: 700;
    color: #3f3f3f;
    position: relative;
  }

  .el-select {
    margin-left: 10px;
  }

  textarea {
    resize: none;
    border: 1px solid #dcdfe6;
    border-radius: 5px;
    vertical-align: top;
    margin-left: 10px;
    padding: 10px;
    outline: none;
    &:focus {
      border-color: #409eff;
    }
  }
}
.role-functions {
  // background-color: pink;
  width: 300px;
  margin-left: 30px;
  font-weight: normal;
  display: inline-block;
  position: relative;
  vertical-align: top;
  li {
    margin: 5px 0px;
    list-style: initial;
  }
}
.submit-btu {
  text-align: center;
  margin-top: 30px;
}
.promt {
  padding-left: 100px;
  color: orangered;
  // letter-spacing: 2px;
}
</style>